import React from 'react'

class Tabs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: null,
    }
  }
  handelChange(id, e) {
    console.log(id, e)
    this.setState({
      activeIndex: id,
    })
  }
  getTabLabel() {
    return this.props.children.map((item) => {
      return (
        <div
          className={`tab-label-item`}
          key={item.key}
          id={item.props.id}
          onClick={(e) => this.handelChange(item.props.id, e)}
        >
          {item.props.tab}
        </div>
      )
    })
  }
  getTabContent() {
    let active = null
    let { defaultActiveIndex } = this.props
    active = this.state.activeIndex
      ? this.state.activeIndex
      : defaultActiveIndex
    let a = this.props.children.map((item) => {
      return item.props.id === active ? item : null
    })
    console.log(a)
    return a
  }
  render() {
    return (
      <div>
        <div className={`tab-labels`}>{this.getTabLabel()}</div>
        <div className={`tab-content`}>{this.getTabContent()}</div>
      </div>
    )
  }
}
class TabPane extends React.Component {
  state = {}
  render() {
    return <div>{this.props.children}</div>
  }
}

export { Tabs, TabPane }
